<template>
  <Header :title="state.type === 'login' ? '登录' : '注册'"></Header>
  <img class="logo" src="@/assets/vue.svg" alt="">
  <div v-if="state.type === 'login'" class="login-wrapper" login>
    <van-form @submit="onSubmit()">
      <van-field v-model="state.username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <div class="link-register" @click="toggle('register')">立即注册</div>
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>

  </div>
  <div v-else class="login-wrapper" register>
    <van-form @submit="onSubmit()">
      <van-field v-model="state.username1" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="state.password1" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="state.password2" type="password" name="密码" label="确认密码" placeholder="再次输入密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <div class="link-register" @click="toggle('login')">已有账号？点击登录</div>
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup>
import { useRouter} from 'vue-router'
import { reactive } from 'vue';
import Header from '../components/Header.vue'
import { register,login } from '@/api/service/user.js';
import { showSuccessToast } from 'vant';
import { md5 } from 'js-md5'; //登录传密码会泄漏，所以加个md5 md5是个函数  yarn add js-md5 
const router = useRouter()
const state = reactive({
  username: '',
  password: '',
  type: 'login',
  username1: '',
  password1: '',
  password2: ''
})
//登录
const onSubmit = async () => {
  // console.log("登录");
  if (state.type === 'login') {  //登录流程
    //登录传密码会泄漏，所以加个md5  yarn add js-md5
   const {data}= await login({
      loginName:state.username,
      passwordMd5:md5(state.password)
    })
    console.log(data);  
    //data也就是token 令牌 ，之后你想要获取首页的数据就可以把token的值带到后端
    // ，让后端自动我们是登录了的
    localStorage.setItem('token',data)  //把token 存储到本地存储里
    router.push('home')
  } else {
    if (state.password1 === state.password2) {
      await register({
        loginName: state.username1,
        password: state.password1,
      })
      showSuccessToast('注册成功');
      state.type = 'login'

    }
  }

}

//切换页面去注册
const toggle = (type) => {
  state.type = type
}


</script>

<style lang="less" scoped>
.logo {
  width: 120px;
  display: block;
  margin: 80px auto 20px;
}

.login-wrapper {
  padding: 0 20px;

  .link-register {
    font-size: 14px;
    color: #1989fa;
    margin-bottom: 20px;
  }
}
</style>